<template>
  <div class="recommend">
    <h4>推荐歌单</h4>
    <ul class="list">
      <li class="item" v-for="item in data" :key="item.id" @click='itemClick(item.id)'>
        <img v-lazy="item.picUrl" :src="item.picUrl" alt="" />
        <p class="cover"></p>
        <div class="playTotal">
          <span class="iconfont icon-headset"></span>
          <span>{{ item.playCount | totalFor }}</span>
        </div>
        <div class="info">{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "recommend-list",
  props: {
    data: Array,
  },
  methods: {
    itemClick(id){
      this.$router.push('/recommend/'+id)
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/global-style.scss";
.recommend {
  width: 100%;
  h4 {
    font-size: $font-size-l;
    font-weight: 700;
    margin: 10px 0 20px 10px;
  }
  .list {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    li {
      position: relative;
      width: 32%;
      img {
        width: 100%;
        border-radius: 7px;
      }
      .cover {
        width: 100%;
        height: 20%;
        position: absolute;
        border-radius: 7px;
        top: 0;
        left: 0;
        background: linear-gradient(
          rgba(110, 110, 110, 0.4),
          rgba(255, 255, 255, 0)
        );
      }
      .playTotal {
        position: absolute;
        top: 2px;
        right: 2px;
        font-size: $font-size-s;
        color: $font-color-light;
        display: flex;
        align-items: center;
        .iconfont {
          font-size: $font-size-m;
        }
      }
      .info {
        color: $font-color-desc;
        height: 50px;
        margin: 2px 0 0 2px;
        line-height: 1.4;
      }
    }
  }
}
</style>
